<template>
  <view class="container">
    <view class="tips">
      <view>临时占用会对账号状态和同步库存状态都为开启的渠道账号进行库存的占用。</view>
    </view>

    <view class="form-wrap">
      <ve-card>
        <ve-form :model="form" :rules="rules" ref="formRef">
          <ve-form-item label="占用时间" prop="fromTime" required labelPosition="top">
            <ve-daterange-picker
              v-model:start="form.fromTime"
              v-model:end="form.toTime"
              :placeholder="['开始时间', '结束时间']"
              mode="datetime"
            />
          </ve-form-item>
          <ve-form-item label="占用原因" labelPosition="top">
            <ve-input type="textarea" v-model="form.remark" :maxlength="100" />
          </ve-form-item>
          <ve-form-item label="车牌号">
            <text>{{ car.licenseNo }}</text>
          </ve-form-item>
          <ve-form-item label="车型" :borderBottom="false">
            <text style="text-align: right">{{ car.modelName }}</text>
          </ve-form-item>
        </ve-form>
      </ve-card>
    </view>
    <ve-bottom-box>
      <ve-button type="primary" size="long" @click="submitFn">确认</ve-button>
    </ve-bottom-box>

    <!-- 排车周期校验 -->
    <PlatoonCarCheckModal ref="platoonCarCheckModalRef" />
  </view>
</template>

<script setup name="CarStockTempUse">
  import { ref } from 'vue'
  import { addTempUseApi } from '@/api/asset/car-stock'
  import { onLoad } from '@dcloudio/uni-app'
  import useToast from '@/hooks/useToast'
  import PlatoonCarCheckModal from '@/components/confirm/platoon-car-check-modal.vue'

  const form = ref({})
  const formRef = ref()
  const car = ref({})
  onLoad((options) => {
    car.value = options
    form.value = {
      carId: +car.value.carId,
      fromTime: undefined,
      toTime: undefined,
      remark: undefined,
    }
  })

  const rules = {
    fromTime: [{ required: true, message: '请选择占用时间' }],
  }

  const platoonCarCheckModalRef = ref()
  const submitFn = () => {
    formRef.value.validate((valid, errors) => {
      if (valid) {
        if (form.value.fromTime == form.value.toTime) {
          uni.showToast({
            icon: 'none',
            title: '开始时间和结束时间不能相同',
          })
          return
        }
        platoonCarCheckModalRef.value.confirm({
          title: '请确认是否临时占用？',
          params: {
            refId: undefined,
            startTime: form.value.fromTime,
            endTime: form.value.toTime,
            useType: 11,
            carId: form.value.carId,
          },
          onOk: (successCb) => {
            addTempUseApi({ ...form.value })
              .then(() => {
                useToast({
                  title: '临时占用成功',
                }).then(() => {
                  uni.$emit('carStock:loadData')
                  uni.navigateBack()
                })
              })
              .finally(() => {
                successCb()
              })
          },
        })
      }
    })
  }
</script>
<style lang="less" scoped>
  .container {
    min-height: 100vh;
  }
  .form-wrap {
    padding: 24rpx;
  }
  .tips {
    width: 100%;
    background: #e8f3ff;
    padding: 18rpx 32rpx;
    color: #1d2129;
    font-size: 24rpx;
    font-weight: 400;
  }
</style>
